<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        *{
            width: 100px;
            height: 100px;
        }
        .t1{
            background-color: pink;
        }
        .t2{
            /*外边距:元素和元素之间的间距 为了控制元素的显示位置*/
            /*一个参数 上下左右*/
            margin: 20px;
            /*两个参数 上下 左右*/
            margin: 10px 30px;
            /*三个参数 上 左右 下*/
            margin: 10px 50px 30px;
            /*四个参数 上 右 下 左 */
            margin: 10px 50px 30px 20px;
            /*单边控制*/
            margin-left: 50px;
            margin-top: 20px;
            margin-right: 25px;
            margin-bottom: 10px;
            /*内边距:内容到边框之间的间距 为了控制元素内容的位置*/
            /*内边距也可以写1~4个参数 方向同外边距*/
            /*内边距也能单边控制 left/right/top/bottom*/
            padding: 20px;
            background-color: green;
            /*边框 border-left/right/top/bottom*/
            border: 10px solid red;
            border-left: 5px solid yellow;
            /*单独控制 border-left/right/top/bottom-width 边框大小 了解即可*/
            border-left-width: 20px;
            /*单独控制 border-left/right/top/bottom-color 边框颜色 了解即可*/
            border-left-color: yellow;

        }
        .t3{
            background-color: blue;
            border-left: 100px solid yellow;
            border-right: 100px solid red;
            border-top: 100px solid orange;
            border-bottom: 100px solid pink;
        }
    </style>
</head>
<body>
<!--盒子模型是CSS中常见的布局模型,它把HTML元素看做一个一个矩形盒子,
这个盒子由 内容content + 内边距padding + 边框border + 外边距margin组成
内容区域:控制元素的显示大小
外边距:控制元素显示位置
内边距:控制元素内容位置
-->
<div class="t1">java</div>
<div class="t2">c++</div>
<div class="t3">html</div>
</body>
</html>